<template>
  <div class="allBox">
    <div class="top">
      <div class="top_svg">
        <img src="../utils/images/logo.png" width="200px" height="140px" />
      </div>
      <div class="top_title">
        <!-- <div class="top_title_item">搜索</div> -->
        <div class="top_title_item" @click="titkitToMinePage">我的</div>
        <div class="top_title_item" @click="titkitToShoppingCarPage">购物车</div>
        <div class="top_title_item" @click="titkitToOrderPage">订单</div>
        <div class="top_title_item font_css_red">售后</div>
        <div class="top_title_item" @click="titckToContentPage">联系我们</div>
      </div>
      <div class="top_user">
        <div class="top_user_welcome">
          <span class="welcome_span">欢迎：</span>
          <span class="welcome_user" style="color: lightpink">{{
            orderListStore.userInfo.userName
          }}</span>
        </div>
        <div class="top_user_logo">
          <el-avatar :size="70" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
        </div>
      </div>
    </div>
    <div class="orderListDivCss">
        <div class="mailBox">
            <div class="mailBoxSHOW">
                <!-- <div class="textAlinRight marginCssStyle"> -->
                <div v-for="(item,index) in orderListStore.mailList" :key="index" :class="(item.sender == orderListStore.userInfo.userName?'textAlinRight marginCssStyle':'marginCssStyle')">
                    <el-card style="max-width: 1400px">
                        <span class="font_css_red">{{item.sender}} --> {{ item.reciver }}</span>
                        <span style="font-size: 12px;">-({{ item.time }}) : </span>
                        <span>{{ item.message }}</span>
                    </el-card>
                </div>
            </div>
        </div>
        <div class="mailBox">
            <el-input
                v-model="mailTextarea"
                style="width: 1340px"
                :rows="3"
                type="textarea"
                placeholder="点击此处进行留言"
            />
            <div style="margin-top: 20px; text-align: center;">
                <el-button type="primary" @click="sendMailMession">发送</el-button>
            </div>
        </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { useOrderListStore } from '../store/OrderList';
import { ElMessage } from 'element-plus';

const orderListStore = useOrderListStore();
let router = useRouter();
let mailTextarea = ref('');

function sendMailMession(){
    //发送消息
    if(!mailTextarea.value || mailTextarea.value == 0){
        ElMessage({
            message: '请在输入框内输入您想要咨询的问题或短语!',
            type: 'warning',
            showClose: true,
        })
    }else{
        let newMailID = ref('');
        newMailID.value = orderListStore.userInfo.userName + Date.now().toString();
        // 创建一个Date对象
        const now = new Date();
        // 使用模板字符串格式化日期和时间
        const formattedDate = `${now.getFullYear()}年${now.getMonth() + 1 < 10 ? '0' : ''}${now.getMonth() + 1}月${now.getDate() < 10 ? '0' : ''}${now.getDate()}日 ${now.getHours() < 10 ? '0' : ''}${now.getHours()}:${now.getMinutes() < 10 ? '0' : ''}${now.getMinutes()}:${now.getSeconds() < 10 ? '0' : ''}${now.getSeconds()}`;
        orderListStore.mailList.push({
            sender:orderListStore.userInfo.userName,
            reciver:orderListStore.admininstorInfo.admininstorName,
            message:mailTextarea.value.toString(),
            time:formattedDate,
            _id:newMailID.value
        });
        ElMessage({
            showClose: true,
            message: '发送成功! 请留意后续商家回复',
            type: 'success',
        });
        //清空文本域
        mailTextarea.value = ""
    }
}
function titkitToMinePage(){
  //跳转回主页
  router.push('/Shop')
}
function titkitToShoppingCarPage(){
  //跳转至购物车页
  router.push('/shoppingcar')
}
function titkitToOrderPage(){
    //跳转至订单页
    router.push('/order')
}
function titckToContentPage(){
  //跳转至联系我们
  router.push('/content')
}
</script>

<style scoped>
.allBox {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  overflow: auto;
  scrollbar-width: none;
}
.allBox::-webkit-scrollbar {
  display: none;
}
.top {
  height: 140px;
  display: flex;
}
.top_svg {
  width: 200px;
}
.top_title {
  width: 70vw;
  display: flex;
  padding: 0 20px;
}
.top_title_item {
  width: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(75, 188, 225);
  font-size: 20px;
  margin: 0 20px;
}
.top_title_item:hover {
  font-size: 25px;
  cursor: pointer;
}
.top_user {
  flex: 1;
  display: flex;
}
.top_user_welcome {
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome_span {
  font-style: oblique;
  font-size: 20px;
}
.top_user_logo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_user_logo_box {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.orderListDivCss{
  border-top: 1px solid #0a0a0a;
  padding: 10px 70px;
}
.rentShopItemInfo{
  box-sizing: border-box;
  display: flex;
}
.font_css_red{
  color: red;
}
.mailBox{
    height: 400px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 10px 30px;
}
.mailBoxSHOW{
    height: 380px;
    border: 1px solid #aaa;
    padding: 10px 40px;
    overflow: auto;
    scrollbar-width: none;
}
.mailBoxSHOW::-webkit-scrollbar {
  display: none;
}
.textAlinRight{
    text-align: right;
}
.marginCssStyle{
    margin: 20px 0;
}
</style>
